<template>
  <div>

<div class="box" v-loading="isShow"></div>

<button @click="isShow = !isShow">点我发请求，加载loading</button>
  </div>
</template>

<script>
  export default {
data() {
      return {
        isShow:false
      }
  }
  ,
  methods: {
    randomColor() {
    this.color='#'+Math.random().toString(16).slice(2,8)
  }
  },
}
</script>
<style scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box {
  width: 100px;
  height: 100px;
  background-color: pink;
  position: relative;
}
/* 伪元素 */
.loading::before {
  content: ' ';
  width: 50%;
  height: 50%;
  border: 2px solid red;
  border-top: 0;
  border-right: 0;
  position: absolute;
  border-radius: 50%;
  left: 25%;
  top: 25%;
  /* translate: -50% -50%; */
  transform: translate(-50%, -50%);
  animation: spin 1s linear infinite;
  position: absolute;
}



/* 定义旋转动画关键帧 */
@keyframes spin {
  from {
    transform: rotate(0deg);

  }

  to {
    transform: rotate(360deg);
  }
}

</style>